<template>
    <div class="card" @click="checkDetail">
        <template v-if="currentPath === '/news'">
            <div class="car-box">
                <img :src="card.fengmiantupian" alt="">
                <div class="card-main">
                    <div class="card-title">{{ card.xinwenbiaoti }}</div>
                    <div class="card-text text-overflow" v-html="text"></div>
                    <div class="card-time">{{ card.faburen }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                        card.fabushijian
                        }}</div>
                </div>
            </div>
        </template>
        <template v-else-if="currentPath === '/activity'">
            <div class="car-box">
                <img :src="card.huodongtupian" alt="">
                <div class="card-main">
                    <div class="card-title">{{ card.huodongmingcheng }}</div>
                    <div class="card-text text-overflow" v-html="card.fuwuneirong"></div>
                    <div class="card-time">{{ card.lianxifangshi }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        {{ card.addtime }}</div>
                </div>
            </div>
        </template>
        <template v-else-if="currentPath === '/donate'">
            <div class="car-box">
                <img :src="card.fengmiantupian" alt="">
                <div class="card-main">
                    <div class="card-title">{{ card.juanzengbiaoti }}</div>
                    <div class="card-text text-overflow" v-html="card.juanzengneirong"></div>
                    <div class="card-time">{{ card.weixinyonghuming }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                        card.juanzengdidian
                        }}</div>
                </div>
            </div>
        </template>
        <template v-else-if="currentPath === '/about'">
            <div class="car-box">
                <img :src="card.fengmiantupian" alt="">
                <div class="card-main">
                    <div class="card-title">{{ card.biaoti }}</div>
                    <div class="card-text text-overflow" v-html="card.neirong"></div>
                    <div class="card-time">{{ card.lianxiren
                        }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ card.lianxifangshi }}&nbsp;&nbsp;&nbsp;&nbsp;{{
                            card.youxiang
                        }}</div>
                </div>
            </div>
        </template>
        <template v-else-if="currentPath === '/links'">
            <div class="car-box">
                <img :src="card.tupian" alt="">
                <div class="card-main">
                    <div class="card-title">{{ card.lianjiemingcheng }}</div>
                    <div class="card-text text-overflow" v-html="card.lianjiewangzhan"></div>
                    <div class="card-time">{{ card.addtime }}</div>
                </div>
            </div>
        </template>
        <template v-else-if="currentPath === '/story'">
            <div class="car-box">
                <img :src="card.fengmiantupian" alt="">
                <div class="card-main">
                    <div class="card-title">{{ card.biaoti }}</div>
                    <div class="card-text text-overflow" v-html="card.neirong"></div>
                    <div class="card-time">{{ card.yonghuxingming }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                        card.yonghuzhanghao
                    }}</div>
                </div>
            </div>
        </template>
    </div>
</template>


<script setup>
import { ref, inject, defineProps } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const props = defineProps({
    card: Object
})

const router = useRouter()
const route = useRoute()
const request = inject('request')
const list = ref(null)
const text = ref(null)
const currentPath = ref(route.path)


if (currentPath.value === '/news' && props.card) {
    text.value = props.card.xinwenneirong.replace(/\n/g, ' ').replace(/\s+/g, ' ')
}



const checkDetail = () => {
    localStorage.setItem('cardDetail', JSON.stringify(props.card))
    router.push({
        path: './detail',
        query: {
            path: currentPath.value,
        }
    })
}
</script>


<style scoped lang="scss">
.card {
    display: flex;
    padding: 10px;
    margin-top: 10px;

    .car-box {
        display: flex;
    }

    img {
        width: 220px;
        height: 160px;
    }

    .card-main {
        display: flex;
        flex-direction: column;
        margin-left: 10px;

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }

        .card-text {
            color: #999;
            font-size: 12px;
            margin-bottom: auto;

        }

        .card-time {
            font-size: 12px;
            color: #999;
        }
    }
}

.text-overflow {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* 需要显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>